<template>
  <n-space vertical>
		<n-space>
			<n-button type="primary" @click="add">添加学生</n-button>
			<n-button type="primary" @click="batchImport">批量导入</n-button>
		</n-space>
		<n-data-table :row-key="rowdata => rowdata.id" :data="tableData" :columns="columns" />
		<WyDialog v-model:show="batchDialog.show" :title="batchDialog.title">
			<n-space vertical>
				<a style="color: #0000ff" href="/students.csv">下载模版</a>
				<n-upload
					directory-dnd
					:max="1"
					:default-upload="false"
					@change="upload">
					<n-upload-dragger>
						<div style="margin-bottom: 12px">
							<n-icon size="48" :depth="3">
								<ArchiveIcon />
							</n-icon>
						</div>
						<n-text style="font-size: 16px">
							点击或者拖动文件到该区域来上传
						</n-text>
					</n-upload-dragger>
				</n-upload>
			</n-space>
		</WyDialog>
		<WyDialog v-model:show="editDialog.show" :title="editDialog.title">
			<WyEdit :id="editDialog.id" :grade-id="props.gradeId"  @getTableData="getTableData" v-model:show="editDialog.show"  />
		</WyDialog>
	</n-space>
</template>

<script setup>
import { ArchiveOutline as ArchiveIcon } from '@vicons/ionicons5'
import { list, createColumns } from '@/api/studentApi'
import WyDialog from '@/components/dialog'
import WyEdit from '@/components/student/edit'
import { post } from '@/axios'
import { useDialog } from 'naive-ui'
const dialog = useDialog()
const columns = createColumns({
	update (id) {
		editDialog.id = id
		editDialog.title = '修改学生'
		editDialog.show = true
	},
	del (id, active) {
		dialog.warning({
			title: '提示',
			positiveText: '确定',
			negativeText: '取消',
			content: !active ? '确定要删除吗?' : '确定要恢复吗？',
			onPositiveClick: () => {
				post('/student/del', { id, active }, content => {
					getTableData()
				})
			}
		})
	}
})
const props = defineProps(['gradeId'])
const tableData = ref([])
const editDialog = reactive({
	show: false,
	title: '',
	id: null
})
const batchDialog = reactive({
	show: false,
	title: '批量导入'
})
function getTableData () {
	list({ gradeId: props.gradeId }, content => {
		tableData.value = content
	})
}
onMounted(() => {
	getTableData()
})
function batchImport () {
	batchDialog.show = true
}
function upload ({file, fileList, event}) {
	if (event) {
		batchDialog.show = false
		post('/student/upload', { file: file.file, gradeId: props.gradeId }, content => {
			getTableData ()
		})
	}
}
function add () {
	editDialog.id = null
	editDialog.title = '添加学生'
	editDialog.show = true
}
</script>

<style scoped lang="scss">
</style>